<script setup>
import {ref, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {User, Lock, ArrowRight, Plus, Picture, Warning} from '@element-plus/icons-vue';
import petApi from '../api/pet_api.js';
import {
  ElMessage,
  ElTable,
  ElTableColumn,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElPagination,
  ElIcon,
  ElCarousel,
  ElCarouselItem,
  ElImage
} from 'element-plus';

const router = useRouter();

const previewSrcList = ref(['https://p2.ssl.qhimgs1.com/sdr/400__/t01478eb014b0c178b2.png']);

const carouselImages = ref([
  {url: 'https://p1.ssl.qhimgs1.com/sdr/400__/t011a66b6dfded0ab61.jpg', alt: '宠物领养宣传图1'},
  {url: 'https://p2.ssl.qhimgs1.com/sdr/400__/t046c19ea79ad03ff28.jpg', alt: '宠物领养宣传图2'},
  {url: 'https://p1.ssl.qhimgs1.com/sdr/400__/t04d3d17f8f6ccbd6e1.jpg', alt: '宠物领养宣传图3'}
]);

// 表格数据相关
const tableData = ref([]); // 表格展示数据
const total = ref(0); // 总记录数
const defaultImg = 'https://picsum.photos/100/100?grayscale'; // 图片占位图

// 筛选条件
const searchObj = ref({
  current: 1,    // 当前页码
  limit: 10,     // 每页条数
  pet_id: '',    // 宠物编号
  pet_name: '',  // 宠物名称
  pet_sex: '',   // 宠物性别
  pet_kind: '',  // 宠物种类
  state: ''      // 宠物状态
});

// 页面挂载时加载数据
onMounted(async () => {
  await getPetData();
});

// 获取宠物数据（支持筛选和分页）
const getPetData = async () => {
  try {
    const result = await petApi.page(searchObj.value);
    tableData.value = result.data || [];
    total.value = result.count || 0;
  } catch (error) {
    ElMessage.error('获取宠物信息失败');
    console.error('数据请求错误:', error);
  }
};

// 获取表格数据
const search = async () => {
  const result = await petApi.page(searchObj.value);
  tableData.value = result.data;
  total.value = result.count;
}

// 执行筛选
const handleSearch = async () => {
  searchObj.value.current = 1; // 重置为第一页
  search();
  // await getPetData(); // 直接调用获取数据的方法
};

// 分页-每页条数变更
const handleSizeChange = async (val) => {
  searchObj.value.limit = val;
  await getPetData();
};

// 分页-当前页码变更
const handleCurrentChange = async (val) => {
  searchObj.value.current = val;
  await getPetData();
};

// 跳转到用户登录页
const goUserLogin = () => {
  router.push('/userLogin');
};

// 跳转到管理员登录页
const goAdminLogin = () => {
  router.push('/login');
};

// 预约寄养-携带宠物ID跳转
const handleFosterBooking = (pet_id) => {
  router.push({path: '/userLogin', query: {pet_id}});
  ElMessage.success('前往寄养预约页面');
};

// 预约领养-携带宠物ID跳转
const handleAdoptBooking = (pet_id) => {
  router.push({path: '/userLogin', query: {pet_id}});
  ElMessage.success('前往领养预约页面');
};
</script>

<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="home-header">
      <div class="logo">
        <img src="../assets/logo.png" alt="抱抱窝" class="logo-img"/>
        <span class="logo-text">抱抱窝——宠物领养平台</span>
      </div>
      <div class="login-buttons">
        <el-button
            type="primary"
            class="user-login-btn"
            @click="goUserLogin"
            icon="User"
        >
          用户登录/注册
          <ArrowRight class="btn-icon"/>
        </el-button>
        <el-button
            type="success"
            class="admin-login-btn"
            @click="goAdminLogin"
            icon="Lock"
        >
          管理员登录
          <ArrowRight class="btn-icon"/>
        </el-button>
      </div>
    </header>

    <!-- 轮播图区域 -->
    <section class="carousel-container">
      <el-carousel height="400px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
          <img :src="item.url" :alt="item.alt" class="carousel-img"/>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 宠物卡片引导区 -->
    <section class="pet-list-container">
      <h2 class="section-title">赶快登录预约，来挑选你的心动嘉宾吧</h2>
    </section>

    <!-- 宠物卡片展示区 -->
    <div class="card-container">
      <el-card style="max-width: 480px">
        <template #header>可可爱爱的一对小鹦鹉</template>
        <img
            src="https://p0.ssl.qhimgs1.com/sdr/400__/t04f31b6174f93f7c80.jpg"
            style="width: 100%"
        />
      </el-card>
      <el-card style="max-width: 480px">
        <template #header>公主猫猫殿下</template>
        <img
            src="https://p1.ssl.qhimgs1.com/sdr/400__/t04fa67986cbdfaf637.jpg"
            style="width: 100%"
        />
      </el-card>
      <el-card style="max-width: 480px">
        <template #header>龙猫猫猫猫也是猫</template>
        <img
            src="https://p0.ssl.qhimgs1.com/sdr/400__/t0400ba53e48a368b66.jpg"
            style="width: 100%"
        />
      </el-card>
      <el-card style="max-width: 480px">
        <template #header>阳光开朗大狗狗</template>
        <img
            src="https://p1.ssl.qhimgs1.com/sdr/400__/t044744c2e33de60837.jpg"
            style="width: 100%"
        />
      </el-card>
    </div>

    <!-- 筛选表单 -->
    <section class="filter-form">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin: 10px 50px;">
        <el-form-item label="宠物编号">
          <el-input v-model="searchObj.pet_id" placeholder="请输入宠物编号" clearable/>
        </el-form-item>
        <el-form-item label="宠物名称">
          <el-input v-model="searchObj.pet_name" placeholder="请输入宠物名称" clearable/>
        </el-form-item>
        <el-form-item label="宠物性别">
          <el-input v-model="searchObj.pet_sex" placeholder="请输入宠物性别" clearable/>
        </el-form-item>
        <el-form-item label="宠物种类">
          <el-input v-model="searchObj.pet_kind" placeholder="请输入宠物种类" clearable/>
        </el-form-item>
<!--        <el-form-item label="宠物状态">-->
<!--          <el-input v-model="searchObj.state" placeholder="请输入宠物状态" clearable/>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">筛选</el-button>
        </el-form-item>
      </el-form>
    </section>

    <!-- 宠物信息表格板块 -->
    <section class="pet-table-container">
      <h2 class="section-title">宠物信息表</h2>
      <el-table :data="tableData" border style="width: 100%; margin: 0 50px;">
        <el-table-column label="宠物照片" width="160">
          <template #default="scope">
            <el-image
                :src="scope.row.pet_photo || defaultImg"
                fit="cover"
                style="width: 100px; height: 100px"
                :preview-src-list="[scope.row.pet_photo || defaultImg]"
                preview-teleported
                :z-index="9999"
            >
              <template #placeholder>
                <div class="image-placeholder">
                  <el-icon>
                    <Picture/>
                  </el-icon>
                  <span>无照片</span>
                </div>
              </template>
              <template #error>
                <div class="image-placeholder">
                  <el-icon>
                    <Warning/>
                  </el-icon>
                  <span>加载失败</span>
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="pet_name" label="宠物名称"/>
        <el-table-column prop="pet_id" label="宠物编号"/>
        <el-table-column prop="pet_variety" label="宠物类型"/>
        <el-table-column prop="pet_age" label="宠物年龄"/>
        <el-table-column prop="pet_sex" label="宠物性别"/>
        <el-table-column prop="pet_kind" label="宠物品种"/>
        <el-table-column prop="state" label="宠物状态"/>
        <el-table-column prop="introduction" label="宠物简介"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
                type="primary"
                icon="Plus"
                size="small"
                @click="handleFosterBooking(scope.row.pet_id)"
            >
              预约寄养
            </el-button>
            <el-button
                type="success"
                icon="Plus"
                size="small"
                style="margin-left: 10px"
                @click="handleAdoptBooking(scope.row.pet_id)"
            >
              预约领养
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
          v-model:current-page="searchObj.current"
          v-model:page-size="searchObj.limit"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin: 20px 50px;"
      />
    </section>

    <footer class="home-footer">
      © 2025 抱抱窝宠物领养平台 版权所有
    </footer>
  </div>
</template>

<style scoped>
.card-container {
  display: flex;
  gap: 30px;
  padding: 0 50px;
  flex-wrap: wrap;
}

.card-container el-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
}

.home-header {
  height: 80px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: white;
  padding: 5px;
}

.logo-text {
  color: pink;
  font-size: 20px;
  margin-left: 15px;
  font-weight: 500;
}

.login-buttons {
  display: flex;
  gap: 15px;
}

.user-login-btn,
.admin-login-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  font-size: 14px;
}

.btn-icon {
  width: 1em;
  height: 1em;
}

.carousel-container {
  width: 100%;
  margin: 20px 0;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.pet-list-container {
  padding: 30px 50px;
  flex: 1;
}

.section-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  border-left: 4px solid #ffb6b9;
  padding-left: 15px;
}

.pet-table-container {
  padding: 0;
  flex: 1;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
}

.image-placeholder el-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.home-footer {
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: black;
  color: #ed8d8d;
  font-size: 14px;
  margin-top: 50px;
}

@media (max-width: 768px) {
  .home-header {
    padding: 0 20px;
  }

  .logo-text {
    font-size: 16px;
  }

  .pet-list-container,
  .pet-table-container {
    padding: 20px 15px;
  }

  .carousel-container {
    margin: 10px 0;
  }
}
</style>
